import React, { Component } from 'react';
import { Tabs, Cascader, Input, Space, Table, Checkbox, Switch, Button, Steps } from 'antd';
import axios from 'axios'
// import store from '../../../../../../redux/store'
import { connect } from 'react-redux'
//TAB切换
const { TabPane } = Tabs;
//搜索框
const { Search } = Input;

//选择器
const options = [
    {
        value: 'zhejiang',
        label: 'Zhejiang',
        children: [
            {
                value: 'hangzhou',
                label: 'Hangzhou',
                children: [
                    {
                        value: 'xihu',
                        label: 'West Lake',
                    },
                ],
            },
        ],
    },
    {
        value: 'jiangsu',
        label: 'Jiangsu',
        children: [
            {
                value: 'nanjing',
                label: 'Nanjing',
                children: [
                    {
                        value: 'zhonghuamen',
                        label: 'Zhong Hua Men',
                    },
                ],
            },
        ],
    },
];

//点击搜索
function onChange(value) {
    console.log(value);
}


//输入框
// const onFinish = (values) => {
//     console.log('Success:', values);
// };

// const onFinishFailed = (errorInfo) => {
//     console.log('Failed:', errorInfo);
// };



class Goods_management extends Component {
    state = {
        data: [],
        isShow: false,
        size: 'small',
        current: 0,
        liveup: {
            id: '',
            img: '',
            name: '',
            salesvolume: '',
            repertory: '',
            sort: '',
            state: '',
        },
        columns: [
            {
                title: 'ID',
                dataIndex: 'id',
                align: "center",
                width: "80px"
            },
            {
                title: '商品图',
                dataIndex: '',
                key: 'img',
                align: "center",
                render: (record) => <img src={record.img} alt='' style={{ width: "50px", height: "50px" }} />
            },
            {
                title: '商品名称',
                dataIndex: '',
                key: 'name',
                align: "center",
                render: (record) => <p style={{ width: "100px", height: "50px", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{record.name}</p>
            },
            {
                title: '商品售价',
                dataIndex: 'price',
                key: 'price',
                align: "center",
                width: "100px"
            },
            {
                title: '销量',
                dataIndex: 'salesvolume',
                key: 'salesvolume',
                align: "center",
                width: "100px"
            },
            {
                title: '库存',
                dataIndex: 'repertory',
                key: 'repertory',
                align: "center",
                width: "100px"
            },
            {
                title: '排序',
                dataIndex: 'sort',
                key: 'sort',
                align: "center",
                width: "100px"
            },
            {
                title: '状态',
                dataIndex: '',
                key: 'state',
                align: "center",
                render: (record) => <Switch checkedChildren="显示" unCheckedChildren="隐藏" defaultChecked={record.state === 'false' ? false : true} />
            },
            {
                title: '操作时间',
                dataIndex: 'time',
                key: 'time',
                align: "center"
            },
            {
                title: '操作',
                align: "center",
                render: (record) => <div>
                    <Button style={{ margin: "0 5px", color: 'blue' }} onClick={() => { this.btnchange(record) }}>编辑</Button>
                    <Button style={{ color: 'blue' }} onClick={() => { this.btndel(record) }}>加入回收站</Button>
                </div>


            },
        ],

        column: [
            {
                title: 'ID',
                dataIndex: 'id',
                align: "center",
                key: "id",
                width: "70px"
            },
            {
                title: '商品图',
                dataIndex: '',
                key: 'img',
                align: "center",
                render: (record) => <img src={record.img} alt='' style={{ width: "50px", height: "50px" }} />
            },
            {
                title: '商品名称',
                dataIndex: '',
                key: 'name',
                align: "center",
                render: (record) => <p style={{ width: "100px", height: "50px", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{record.name}</p>
            },
            {
                title: '商品售价',
                dataIndex: 'price',
                key: 'price',
                align: "center"
            },
            {
                title: '库存',
                dataIndex: 'repertory',
                key: 'repertory',
                align: "center",
                width: "70px"
            },
            {
                title: '销量',
                dataIndex: 'salesvolume',
                key: 'salesvolume',
                align: "center",
                width: "70px"
            },
            {
                title: '排序',
                dataIndex: 'sort',
                key: 'sort',
                align: "center"
            },
            {
                title: '状态',
                dataIndex: '',
                key: 'state',
                align: "center",
                width: "80px",
                // render: (record) => <Switch checkedChildren="显示" unCheckedChildren="隐藏" defaultChecked={record.state === 'false' ? false : true} />
                render: (record) => <Switch defaultChecked={record.state === 'false' ? false : true} onChange={onChange} />
            },
            {
                title: '操作时间',
                dataIndex: 'time',
                key: 'time',
                align: "center"
            },
            {
                title: '操作',
                align: "center",
                render: (text, record) => <div>
                    <Button style={{ margin: "0 5px", color: 'blue' }}>编辑</Button>
                    <Button style={{ color: 'blue' }} onClick={() => { this.btndel(record) }}>加入回收站</Button>
                </div>

            },
        ],

    }
    componentDidMount() {
        this.getdata()
    }
    //编辑
    btnchange = (record) => {
        console.log(record);
        this.setState({
            ...this.state.liveup,
            isShow: true,
            liveup: record
        })
    }

    //确定
    submitChange = () => {
        let { id, name, salesvolume, repertory, sort, img, state } = this.state.liveup
        console.log(this.state.liveup);
        axios.get('/Productupdata', {
            params: {
                id: id,
                img: 'https://img0.baidu.com/it/u=1574979659,3259515935&fm=26&fmt=auto',
                name: name,
                type: salesvolume,
                lls: repertory,
                sort: sort,
                state: true,
                price: "123",
                salesvolume: "123",
                repertory: "123",
                sort: "123",
                sate: "123",
                time: "123"

            }
        }).then(res => {
            console.log(res);
        })
    }

    //取消
    cancleIt = () => {
        this.setState({
            isShow: false,
            inpObj: {
                type: "",
                id: "",
                sort: "",
                name: "",
                lls: "",
            }
        })
    }

    changeId = (e) => {
        console.log(e.target.value);
        this.setState({
            liveup: {
                ...this.state.liveup,
                id: e.target.value,
            }
        })
    }

    changeImg = (e) => {
        console.log(e.target.value);
        this.setState({
            liveup: {
                ...this.state.liveup,
                img: e.target.value,
            }
        })
    }

    changeName = (e) => {
        this.setState({
            liveup: {
                ...this.state.liveup,
                name: e.target.value,
            }
        })
    }

    changeSalesvolume = (e) => {
        this.setState({
            liveup: {
                ...this.state.liveup,
                salesvolume: e.target.value,
            }
        })
    }

    changeRepertory = (e) => {
        this.setState({
            liveup: {
                ...this.state.liveup,
                repertory: e.target.value,
            }
        })
    }

    changeSort = (e) => {
        this.setState({
            liveup: {
                ...this.state.liveup,
                sort: e.target.value,
            }
        })
    }

    changeState = (e) => {
        console.log(e);
        this.setState({
            liveup: {
                ...this.state.liveup,
                state: e,
            }
        })

    }
    //获取全部数据
    getdata = () => {
        axios.get('/Productdata', { params: { pindex: '0', psize: '20' } }).then((res) => {
            console.log(res);
            this.setState({
                data: res.data.data
            })
        });
    }
    //搜索
    onSearch = (value) => {
        axios.get(`/Productdata?search=${value}`).then(res => {
            console.log(res);
            if (res.data.code === 200) {
                this.setState({
                    data: res.data.data
                })
            }
        })

    }

    //加入回收站
    btndel = (record) => {
        console.log(record);
        axios.get(`/Productdetile?id=${record.id}`).then((res) => {
            console.log(res);
            if (res.data.code === 200) {
                this.getdata()
            }
        })
    }

    //点击隐藏添加窗口
    btnstop = () => {
        this.setState({
            isShow: false
        })
    }

    render() {
        const { size } = this.state;
        return (
            <div className='management'>
                <Tabs defaultActiveKey="1" size={size} style={{ marginBottom: 32 }}>
                    <TabPane tab="出售中商品" key="1">
                        <div className='classify_shop'>
                            <span>商品搜索：</span>
                            <Space direction="vertical">
                                <Search placeholder="请输入商品名称、关键字、商品ID" onSearch={this.onSearch} style={{ width: 200 }} />
                            </Space>
                        </div>
                        <div className='mock' style={{ display: this.state.isShow ? 'block' : 'none' }}>
                            <button className='btn' onClick={this.btnstop}>X</button>
                            <div className='mock_inner'>
                                <p>ID：<input type="text" style={{ marginLeft: "60px", width: "80%" }} value={this.state.liveup.id} onChange={this.changeId} /></p>
                                <p>商品图片：<input type="text" style={{ marginLeft: "18px", width: "80%" }} value={this.state.liveup.img} onChange={this.changeImg} /></p>
                                <p>商品名称：<input type="text" style={{ marginLeft: "17px", width: "80%" }} value={this.state.liveup.name} onChange={this.changeName} /></p>
                                <p>销量：<input type="text" style={{ marginLeft: "45px", width: "80%" }} value={this.state.liveup.salesvolume} onChange={this.changeSalesvolume} /></p>
                                <p>库存：<input type="text" style={{ marginLeft: "45px", width: "80%" }} value={this.state.liveup.repertory} onChange={this.changeRepertory} /></p>
                                <p>排序：<input type="text" style={{ marginLeft: "45px", width: "80%" }} value={this.state.liveup.sort} onChange={this.changeSort} /></p>
                                <p>状态： <Switch defaultChecked onChange={this.changeState} /></p>
                                <Button type="primary" onClick={this.submitChange}>确定</Button><Button onClick={this.cancleIt}>取消</Button>
                            </div>
                        </div>

                        <div className='classify_list'>
                            <Table dataSource={this.state.data} scroll={{ y: 600 }} columns={this.state.columns} rowSelection={Checkbox} rowKey="id" />
                        </div>
                    </TabPane>
                    <TabPane tab="仓库中商品" key="2">
                        <div className='classify_shop'>
                            <span>商品搜索：</span>
                            <Space direction="vertical">
                                <Search placeholder="请输入商品名称、关键字、商品ID" onSearch={this.onSearch} style={{ width: 200 }} />
                            </Space>
                        </div>

                        <div className='mock' style={{ display: this.state.isShow ? 'block' : 'none' }}>
                            <div className='mock_inner'>
                                <button onClick={this.btnstop}>X</button>
                            </div>
                        </div>

                        <div className='classify_list'>
                            <Table dataSource={this.state.data} scroll={{ y: 600 }} columns={this.state.column} rowSelection={Checkbox} rowKey="id" />
                        </div>
                    </TabPane>
                    <TabPane tab="已经售空商品" key="3">
                        <div className='classify_shop'>
                            <span>商品搜索：</span>
                            <Space direction="vertical">
                                <Search placeholder="请输入商品名称、关键字、商品ID" onSearch={this.onSearch} style={{ width: 200 }} />
                            </Space>
                        </div>

                        <div className='mock' style={{ display: this.state.isShow ? 'block' : 'none' }}>
                            <div className='mock_inner'>
                                <button onClick={this.btnstop}>X</button>
                            </div>
                        </div>

                        <div className='classify_list'>
                            <Table dataSource={this.state.data} scroll={{ y: 600 }} columns={this.state.columns} rowSelection={Checkbox} rowKey="id" />
                        </div>
                    </TabPane>
                    <TabPane tab="商品回收站" key="4">
                        <div className='classify_shop'>
                            <span>商品搜索：</span>
                            <Space direction="vertical">
                                <Search placeholder="请输入商品名称、关键字、商品ID" onSearch={this.onSearch} style={{ width: 200 }} />
                            </Space>
                        </div>

                        <div className='mock' style={{ display: this.state.isShow ? 'block' : 'none' }}>
                            <div className='mock_inner'>
                                <button onClick={this.btnstop}>X</button>
                            </div>
                        </div>

                        <div className='classify_list'>
                            <Table dataSource={this.state.data} scroll={{ y: 600 }} columns={this.state.column} rowSelection={Checkbox} rowKey="id" />
                        </div>
                    </TabPane>
                </Tabs>
            </div>
        );
    }
}

export default connect((state) => {
    return {
        goods_man: state.goods_man,
        page: state.page
    }
})(Goods_management);
